<template>

  <el-container class="home-container">
<!--    这是头部区域-->
  <el-header>
    <div>
<img src="../assets/img/logo.png" alt="">
      <span>上海第二工业大学后勤需求管理系统</span>
    </div>
    <el-button type="info" @click="exit">退出</el-button>
  </el-header>
  <el-container>
<!--    这是侧边栏区域-->
    <el-aside :width="toggle ? '64px' : '200px'">
      <div class="toggle-button" @click="togglemenu">|||</div>

       <el-menu

      background-color="#333744"
      text-color="#fff"
      active-text-color="#ffd04b" unique-opened :collapse="toggle" :collapse-transition="false" router :default-active="def_active">
<!--      router :default-active="def_active">-->
<!--         一级菜单-->
      <el-submenu :index="item.id+''" v-for="item in menulist" :key="item.id">
<!--        一级菜单模板-->
        <template slot="title">
          <i :class="iconObj[item.id]"></i>
          <span>{{item.authName}}</span>
        </template>
<!--        二级菜单-->
          <el-menu-item :index="'/'+item2.path" v-for="item2 in item.children" :key="item2.id" @click="try2">
             <template slot="title">
          <i class="el-icon-menu"></i>
          <span>{{item2.authName}}</span>
        </template>
          </el-menu-item>

           </el-submenu>

    </el-menu>
    </el-aside>
    <el-main>
      <router-view></router-view>
    </el-main>
  </el-container>
</el-container>

</template>

<script>
import {Leftmenu} from "../../networks/leftmenu";

export default {
name: "Home",
  created() {
  this.getLeftMenu()
  },
  data(){
  return{
    menulist:[],
    iconObj:{
      '125':'iconfont icon-user',
      '103':'iconfont icon-tijikongjian',
      '101':'iconfont icon-shangpin',
      '102':'iconfont icon-danju',
      '145':'iconfont icon-baobiao'
    },
    toggle:false,
    aside_width:200,
    def_active:this.$route.path
  }
  },
  methods:{
  exit(){
    window.sessionStorage.clear()
    this.$router.push('/login')
  },
    getLeftMenu(){
    Leftmenu().then(res=>{
      console.log(res.data)
      this.menulist=res.data
    this.menulist[0].authName="供应商管理"
    this.menulist[0].children[0].authName="供应商列表"
    this.menulist[2].authName="需求物品管理"
    this.menulist[2].children.splice(1,2)
     this.menulist[3].authName="需求订单管理"
    this.menulist.splice(4,1)
    this.menulist[2].children[0].authName="物品列表"}
   )
    },
    togglemenu(){
    this.toggle=!this.toggle
    },
    try2(){
    console.log(this.def_active)
    }
  }
}
</script>

<style scoped>
.home-container{
  height: 100%;
}
.el-header{
  background-color: #373d41;
  display: flex;
  justify-content: space-between;
  color: pink;
  align-items: center;
  font-size: 20px;
}
.el-header span{
  position: absolute;
top: 21px;
left: 98px;
}
.el-header div img{
width: 57px;
height: 57px;
border-radius: 35px;
}
.el-aside{
  background-color: #333744;
}
.el-main{
  background-color: #EAEDF1;
}
.iconfont{
  margin-right: 10px;
}
/*解决对不齐的问题*/
.el-menu{
  border-right: none;
}
.toggle-button{
  background-color: #4a5064;
  text-align: center;
  font-size: 16px;
  color: white;
  line-height: 24px;
  cursor: pointer;
}
</style>